<template>
	<view id="warpper">
		<u-tabs :list="list2" :itemStyle="styles" :scrollable="false" lineWidth="45" @change="valchange"
			lineColor="#1ba784"></u-tabs>
		<view v-if="boxs==0" class="box">
			<view class="centerBox">
				<image src="https://v-shop.shuzp.top/v2/assets/img/coupon.88000b57.png" mode="aspectFit"
					style="width:42.67vw;height: 42.67vw;"></image>

				<view style="width: 100%;text-align: center;font-size: 3.73vw;margin-top: 4.27vw;color: #969799;">暂无优惠券
				</view>
				<view class="centerBtn">
					<view style="text-align: center;height: 8.53vw;margin-top: 6.4vw;font-size: 3.73vw;">
						<u-button type="success" :plain="true" text="进店逛逛" shape="circle" class="btn"
							style="color:#1ba784;border-color: #1ba784;"></u-button>
					</view>
				</view>
			</view>


		</view>
		<view v-else-if="boxs==1" class="box">
			<view class="centerBox">

				<image src="https://v-shop.shuzp.top/v2/assets/img/coupon.88000b57.png" mode="aspectFit"
					style="width:42.67vw;height: 42.67vw;"></image>

				<view style="width: 100%;text-align: center;font-size: 3.73vw;margin-top: 4.27vw;color: #969799;">暂无优惠券
				</view>


			</view>
		</view>
		<view v-else class="box">
			<view class="list" style="padding-top: 1.33vw;">
				<view class="couponModule" v-for="item in couponList" :key="item.id">
					<view class="number">
						<view class="money" style="margin-bottom: 1.33vw;">
							<text style="font-size: 8vw;">{{item.money}}</text>
							<text style="font-size: 3.2vw;">元</text>
						</view>
						<view class="condition">满50元可用</view>
					</view>
					<view class="text">
						<view class="name">{{item.name}}</view>
						<view class="time" style="font-size: 3.2vw;color: #969799;;">
							<text>{{item.dateAdd}}</text>至<text>{{item.dateEnd}}</text>
						</view>
					</view>
				</view>


			</view>

		</view>
		<view class="bottomBar" @click="show=true">兑换优惠口令</view>
		<u-popup :show="show" mode="center" @close="close" closeIconPos="top-right" closeable>
			<view class="dialog">
				<view style="width: 100%;text-align: center;padding: 2.67vw;">兑换优惠口令</view>
				<view style="width: 70%;padding: 2.67vw;">
					<u--input placeholder="请输入口令(列如v-shop,2022)"
						style="width: 100%;background-color: rgb(247, 248, 250); height: 60rpx;"></u--input>
				</view>
				<view style="width:35%"><button
						style="font-size: 3.2vw;color: #969799;border-radius: 5px;margin: 5.33vw auto;">兑换</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		_coupon
	} from '../../api/coupon.js'
	export default {

		data() {
			return {
				couponList: [],
				list2: [{
					name: '未使用',

				}, {
					name: '已使用',

				}, {
					name: '已过期',

				}],
				styles: {
					fontSize: "3.73vw!important",
					width: "33vw",
					padding: "4vw 0"
				},
				color: "#1BA784",
				boxs: 0,
				show: false
			}
		},
		methods: {
			getCouponList() {
				_coupon().then(res => {
					// console.log(res)
					let token = uni.getStorageSync("token")
					// console.log(token)
					if (token) {
						if (res.code === 0) {
							this.couponList = res.data
							console.log(this.couponList)
						}
					}else{
						uni.redirectTo({
							url:"/pages/login/login"
						})
					}

				})
			},
			//切换
			valchange(index) {
				console.log(index)
				this.boxs = index.index
				console.log(index, this.boxs)
			},
			// 弹窗
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			onReady() {
				this.getCouponList()
			}
		}
	}
</script>

<style scoped>
	.dialog {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.box {
		background-color: #f7f8fa;
		height: 90vh;
	}

	.bottomBar {
		width: 100%;
		height: 13.33vw;
		line-height: 13.33vw;
		background-color: #fff;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;

	}

	.centerBox {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		text-align: center;
	}

	.centerBtn {
		display: flex;
		justify-content: space-around
	}

	.btn {
		width: 20vw;
		height: 8vw;
	}

	.img {
		display: block;
	}

	.couponModule {
		display: flex;
		justify-content: center;
		border-radius: 5px;
		margin: 0 4vw;
		margin-bottom: 2.67vw;
	}

	.number {
		width: 34%;
		background-color: rgb(200, 201, 204);
		text-align: center;
		font-size: 3.2vw;
		padding: 5.33vw 0;
		color: #fff;
		border-radius: 5px 0 0 5px;
	}

	.text {
		text-align: center;
		padding: 5.33vw 0;
		background-color: #fff;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		border-radius: 0 5px 5px 0;
	}

	.name {
		font-size: 4.27vw;
		margin-bottom: 2.67vw;
		width: 60%;
		text-align: left;
	}
</style>
